<template>
  <div class="app-container">
    <!-- 操作查询面板 -->
    <div class="inquire-top">
      <!-- 控制 -->
      <div class="filter-container">
        <el-button v-permission="['ORG_USER']" class="filter-item" type="primary" @click="addBlick()">新增
        </el-button>
        <el-button class="filter-item" type="primary" @click="resetBlick()">重置</el-button>
        <el-button class="filter-item" type="primary" @click="handleSearch()">查询
        </el-button>
        <el-button style="margin-top: 10px;margin-left: 10px;margin-bottom: 0px;" type="text" class="filter-item text_button" @click="inquireBotton()"><i
          class="el-icon-circle-plus-outline"
        />操作</el-button>
      </div>
      <div v-show="isshow" class="search-input">
        <el-form ref="form" :model="searchFrom" label-width="110px">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="司机姓名:">
                <el-input v-model="name" placeholder="司机姓名" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="司机电话:">
                <el-input v-model="mobile" placeholder="司机电话" class="filter-item" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="鉴权状态:">
                <el-select v-model="secondElementStatuses" multiple filterable placeholder="二要素鉴权状态">
                  <el-option
                    v-for="(item, index) in secondElementStatusesArray"
                    :key="index"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="审核人:">
                <el-input
                  v-model="searchFrom.auditName"
                  style="width: 120px;"
                  size="small"
                  placeholder="审核人"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="申请时间:">
                <el-date-picker
                  v-model="searchFrom.applyForTime"
                  type="datetimerange"
                  range-separator=" ~ "
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  placeholder="选择时间范围"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="审核时间:">
                <el-date-picker
                  v-model="searchFrom.auditTime"
                  type="datetimerange"
                  range-separator=" ~ "
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                  placeholder="选择时间范围"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <!-- 车辆状态  标签页-->
    <div class="vehicle-state">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 全部 -->
        <el-tab-pane v-for="item in header" :key="item.name" :label="item.title" :name="item.name">
          <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list"
            border
            stripe
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="序号" type="index" align="center" width="50" />

            <el-table-column label="姓名" min-width="110px" align="center">
              <template slot-scope="{ row }">
                <span class="link-type" @click="handleDetail(row)">
                  {{ row.name }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="电话" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.mobile }}</span>
              </template>
            </el-table-column>
            <el-table-column label="身份证号码" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.identityCardId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="申请时间" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.createdTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="二要素鉴权状态" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.secondElementStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核时间" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.auditTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核员" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.auditName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="审核状态" min-width="150px" align="center">
              <template slot-scope="{ row }">
                <span v-if="row.auditStatus == 'PENDING'">未审核</span>
                <span v-if="row.auditStatus == 'SUCCESS'">审核通过</span>
                <span v-if="row.auditStatus == 'FALL'">审核不通过</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="{ row }">
                <el-button v-if="checkPermission(['SYSTEM_USER','TENANT_USER'])" type="danger" size="mini" @click="handleUpdate(row)">审核</el-button>

                <el-button
                  v-if="row.status != 'deleted'"
                  size="mini"
                  type="primary"
                  @click="handleDetail(row)"
                >详情</el-button>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="listQuery.current"
            :limit.sync="listQuery.size"
            @pagination="getList"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination'
import { driverList, driverDetails } from '@/api/tms/driver'
import checkPermission from '@/utils/permission'
export default {
  name: 'Index',
  components: { Pagination },
  data() {
    return {
      // auditStatuses: [],
      name: '',
      mobile: '',
      header: [
        {
          title: '全部',
          name: 'quanbu'
        }, {
          title: '未审核',
          name: 'PENDING'
        }, {
          title: '审核通过',
          name: 'SUCCESS'
        }, {
          title: '审核不通过',
          name: 'FALL'
        }

      ],
      secondElementStatusesArray: [
        {
          value: '0',
          label: '鉴权通过'
        }, {
          value: '1',
          label: '未鉴权'
        }, {
          value: '2',
          label: '鉴权不通过'
        }],
      secondElementStatuses: [],
      searchFrom: {
        applyForTime: '',
        auditTime: '',
        auditName: ''
      },

      typeIds: [],
      // statuses: [],
      list: [],
      tableKey: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 20
      },
      total: 0,
      activeName: 'quanbu',
      isshow: false
    }
  },
  created() {
    this.getList()
    console.log(111)
  },
  methods: {
    checkPermission,
    // 新增司机
    addBlick() {
      this.$router.push({ path: '/userInfoManage/driver/add' })
    },
    // 重置
    resetBlick() {
      this.name = ''
      this.mobile = ''
      this.secondElementStatuses = []
      this.searchFrom = {
        applyForTime: '',
        auditTime: '',
        auditName: ''
      }
    },
    // 点击 审核
    handleUpdate(row) {
      this.$router.push({ path: `/userInfoManage/driver/audit/${row.id}` })
    },
    // 点击 详情
    handleDetail(row) {
      this.$router.push({ path: `/userInfoManage/driver/detail/${row.id}` })
    },
    getList() {
      var data = {
        'name': this.name,
        'mobile': this.mobile,
        'secondElementStatuses': this.secondElementStatuses,
        'applyStartTime': parseTime(this.searchFrom.applyForTime[0]),
        'applyEndTime': parseTime(this.searchFrom.applyForTime[1]),
        'auditName': this.searchFrom.auditName,
        'auditStartTime': parseTime(this.searchFrom.auditTime[0]),
        'auditEndTime': parseTime(this.searchFrom.auditTime[1]),
        'current': this.listQuery.current,
        'size': this.listQuery.size,
        'auditStatuses': this.auditStatuses
      }
      driverList(data).then((response) => {
        this.list = response.records
        this.total = response.total
        this.listLoading = false
      })
    },
    inquireBotton() {
      this.isshow = !this.isshow
    },
    handleClick(e) {
      if (e.name === 'quanbu') {
        this.auditStatuses = []
        this.getList()
      } else {
        this.auditStatuses = [e.name]
        this.getList()
      }
    },
    handleSearch() {
      this.listQuery.current = 1
      this.getList()
    }

  }
}
</script>
<style lang="scss">
.filter-container {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 10px;
	.align-items {
		margin-bottom: 0;
	}
	.filter-item{
		margin-top: 10px;
		margin-left: 10px;
		margin-bottom: 0px;
	}
}

.text_button {
	font-size: 16px;
}

.dialog-footer {
	display: flex;
	align-items: center;
	justify-content: center;

	button {
		width: 100px;
	}
}

.search-input {
	width: 100%;
	display: flex;
	align-items: center;
}
</style>
